<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>
	<h:form>
		<h:panelGrid columns="3">
Amount : 
<h:inputText id="amount" value="#{receipt.amount}" size="20"
				required="true" label="Amount">
				<!-- display in at least 2 decimal points -->
<f:convertNumber minFractionDigits="2" />
<f:validateLength minimum="1" maximum="4" />
<f:validateLongRange minimum="1" maximum="100" />
</h:inputText>
<h:message for="amount" style="color:red" />

Receipt Date :
<h:inputText id="date" value="#{receipt.date}" size="20" required="true" label="Receipt Date" >
<f:convertDateTime pattern="dd-MM-yyyy"/>
</h:inputText>			
<h:message for="date" style="color:red"/>

Password :
<h:inputSecret id="password" value="#{receipt.password}" size="20" required="true" label="Password" >
<f:validateRegex pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{6,20})" />
</h:inputSecret>			
<h:message for="password" style="color:red"/>

E-mail:
<h:inputText id="email" value="#{receipt.email}" size="50" required="true" label="E-mail">
	<f:validator validatorId="com.mkyong.validator.EmailValidator"/>
</h:inputText>
<h:message for="email" style="color:red"/>

</h:panelGrid>
<h:commandButton value="Submit" action="convert" />
</h:form>

<h1>JSF 2 convertNumber example</h1>
	<ol>
		<li>Amount [minFractionDigits="2"] : <h:outputText
				value="#{receipt.amount}">
				<f:convertNumber minFractionDigits="2" />				
			</h:outputText>
		</li>
		<li>Amount [pattern="#0.000"] : <h:outputText
				value="#{receipt.amount}">
				<f:convertNumber pattern="#0.000" />
			</h:outputText>
		</li>
		<li>Amount [currencySymbol="$"] : <h:outputText
				value="#{receipt.amount}">
				<f:convertNumber currencySymbol="$" type="currency" />
			</h:outputText>
		</li>
		<li>Amount [currencyCode="GBP"] : <h:outputText
				value="#{receipt.amount}">
				<f:convertNumber currencyCode="USD" type="currency" />
			</h:outputText>
		</li>
		<li>Amount [type="percent"] : <h:outputText
				value="#{receipt.amount}">
				<f:convertNumber type="percent" />
			</h:outputText>
		</li>
	</ol>

<h1>JSF 2 convertDate example</h1>
	Receipt Date :
	<h:outputText value="#{receipt.date}" >
		<f:convertDateTime pattern="dd-MM-yyyy"/>
	</h:outputText>
	
<h1>JSF 2 ValidateRegex Example</h1>
	Password :
	<h:outputText value="#{receipt.password}" />
				
</h:body>
</html>